<template>
    <div class="deal-list">
        <div class="deal-heard">
            <el-input class="deal-input" v-model="searchData.temp" size="mini" placeholder="编码/市场名称/名称" clearable />
            <el-button type="primary" size="mini" @click="searchData.data = searchData.temp">
                查询
            </el-button>
            <el-button type="primary" size="mini" v-authCode.show="B_0237" @click="changeState('enable')">
                启用
            </el-button>
            <el-button type="danger" size="mini" v-authCode.show="B_0238" @click="changeState('disable')">
                禁用
            </el-button>
        </div>
        <div>
            <el-table
                ref="multipleTable"
                :data="filterTableData"
                tooltip-effect="dark"
                style="width: 100%"
                size="mini"
                height="calc(100vh - 180px)"
                row-key="index"
                @selection-change="handleSelectionChange"
                border
                v-tableTop="page.currentPage"
            >
                <el-table-column type="selection" width="50" :reserve-selection="true" align="center"></el-table-column>
                <el-table-column prop="directionCode" label="编码" min-width="150" show-overflow-tooltip></el-table-column>
                <el-table-column prop="marketCode" label="市场名称" min-width="150">
                    <template slot-scope="scope">
                        {{ marketMapping[scope.row.marketCode] }}
                    </template>
                </el-table-column>
                <el-table-column prop="directionName" label="名称" min-width="150" show-overflow-tooltip></el-table-column>
                <el-table-column prop="stockDirection" label="证券交易方向" min-width="150">
                    <template slot-scope="scope">
                        {{ stockDirectionMapping[scope.row.stockDirection] }}
                    </template>
                </el-table-column>
                <el-table-column prop="fundDirection" label="基金交易方向" min-width="150">
                    <template slot-scope="scope">
                        {{ stockDirectionMapping[scope.row.fundDirection] }}
                    </template>
                </el-table-column>
                <el-table-column prop="sourceType" label="数据来源类型" width="122">
                    <template slot-scope="scope">
                        {{ DictionConstUtil.SourceType[scope.row.sourceType] }}
                    </template>
                </el-table-column>
                <el-table-column label="状态" width="122" align="center">
                    <template slot-scope="scope">
                        <el-switch
                            v-model="scope.row.status"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            active-value="0"
                            inactive-value="1"
                            @change="changeRowState($event, scope.row)"
                        ></el-switch>
                    </template>
                </el-table-column>
            </el-table>

            <risk-pagination :paging="page" @page-change="handleCurrentChange"></risk-pagination>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { getCurrentPageData } from '@/utils/tools';
import { enableTradeDirection, forbidTradeDirection } from '@/pages/system-maintence/api';
import DictionConstUtil from '@/utils/diction-const-util';
import RiskPagination from '@/common/components/risk-pagination.vue';

@Component({
    name: 'DealList',
    components: {
        RiskPagination,
    },
})
export default class DealList extends Vue {
    // 表格数据
    DictionConstUtil = DictionConstUtil;
    private tableData: any[] = [];
    private page = {
        currentPage: 1,
        pageSize: 50,
        total: 0,
    };
    // 搜索条件
    private searchData = {
        temp: '',
        data: '',
    };
    stockDirectionMapping: any[] = [];
    marketMapping: any[] = [];
    // 过滤后的表格数据
    get filterTableData(): any[] {
        const search = this.searchData.data;
        const data = this.tableData.filter(item => {
            return (
                String(item.directionCode)
                    .toLowerCase()
                    .indexOf(search) > -1 ||
                String(item.directionName)
                    .toLowerCase()
                    .indexOf(search) > -1 ||
                String(this.marketMapping[item.marketCode])
                    .toLowerCase()
                    .indexOf(search) > -1
            );
        });
        this.page.total = data.length;
        return getCurrentPageData(data, this.page.currentPage, this.page.pageSize);
    }

    handleCurrentChange() {}

    // 过滤后的所有数据
    get filterTableAllData(): any[] {
        const search = this.searchData.data;
        let data = this.tableData.filter(item => {
            return (
                String(item.directionCode)
                    .toLowerCase()
                    .indexOf(search) > -1 ||
                String(item.directionName)
                    .toLowerCase()
                    .indexOf(search) > -1 ||
                String(this.marketMapping[item.marketCode])
                    .toLowerCase()
                    .indexOf(search) > -1
            );
        });
        this.page.total = data.length;
        return data;
    }

    created() {
        this.getData();
        this.getTableReset();
    }

    /**
     * 获取表格数据
     */
    getData(): void {
        this.$axios.get('/direction/all').then((result: any) => {
            this.tableData = result.map((item, index) => {
                return { index, ...item };
            });
        });
    }

    async getTableReset() {
        this.$axios.post('/dict/list/codes', ['Y_000055']).then((res: any) => {
            if (res && res.Y_000055) {
                res.Y_000055.forEach((item: any) => {
                    this.stockDirectionMapping[item.dictKey] = item.dictKeyName;
                });
            }
        });
        let fnw = await DictionConstUtil.FNMarketType();
        fnw.forEach((item: any) => {
            this.marketMapping[item.dictKey] = item.dictKeyName;
        });
    }

    changeState(command: string): void {
        let tip = '';
        let fun;
        let values = (this.$refs.multipleTable as any).selection;
        if (values.length < 1) {
            this.yh_message_success('未选择交易方向数据');
            return;
        }
        let selection = values.map(row => {
            return {
                directionCode: row.directionCode,
                directionName: row.directionName,
                exchangeType: row.exchangeType,
                fundDirection: row.fundDirection,
                marketCode: row.marketCode,
                sourceType: row.sourceType,
                stockDirection: row.stockDirection,
                status: row.status,
            };
        });

        if (command === 'enable') {
            // 启用
            selection = selection.filter(row => {
                return row.status === '1';
            });
            if (!selection.length) {
                this.yh_message_warn('选择的数据中没有需要启用的交易方向！');
                return;
            }
            fun = enableTradeDirection;
            tip = '启用';
        } else {
            // 禁用
            selection = selection.filter(row => {
                return row.status === '0';
            });
            if (!selection.length) {
                this.yh_message_warn('选择的数据中没有需要禁用的交易方向！');
                return;
            }
            fun = forbidTradeDirection;
            tip = '禁用';
        }

        fun(selection).then(result => {
            this.yh_message_success('状态' + tip + '成功');
            (this.$refs.multipleTable as any).clearSelection();
            this.getData();
        });
    }

    changeRowState(value, row): void {
        const data = [
            {
                directionCode: row.directionCode,
                directionName: row.directionName,
                exchangeType: row.exchangeType,
                fundDirection: row.fundDirection,
                marketCode: row.marketCode,
                sourceType: row.sourceType,
                stockDirection: row.stockDirection,
                status: row.status,
            },
        ];

        // 0 : 启用     1：禁用
        let fun = value === '0' ? enableTradeDirection : forbidTradeDirection;

        fun(data)
            .then(result => {
                let tip = value === '0' ? '状态启用成功' : '状态禁用成功';
                this.yh_message_success(tip);
            })
            .catch(() => {
                row.index = value === '0' ? '1' : '0';
            });
    }

    private handleSelectionChange(): void {}
}
</script>
<style lang="scss" scoped>
.deal-list {
    padding-top: 0.18px;

    .deal-heard {
        padding: 8px 10px;
        border: 1px solid #cacaca;

        .deal-input {
            width: 220px;
            margin-right: 20px;
        }
    }
}
</style>
